<template>
    <el-table-column v-if="columnData.children"
    :label="_$Z[columnData.label]?_$Z[columnData.label]:columnData.label"
    align="center"
    >
    <template v-for="tmp in columnData.children">
        <table-column :key ="tmp.prop" :column-data="tmp"></table-column>
    </template>
    
    </el-table-column>
    <el-table-column v-else
        :class="columnData.prop"
        :fixed="columnData.freeze"
        :label="_$Z[columnData.label]?_$Z[columnData.label]:columnData.label"
        :width="columnData.width"
        :sortable="columnData.sort"
        :prop="columnData.prop"
        show-overflow-tooltip
        :align="columnData.align"
        :header-align="columnData.headerAlign">
       
      <template slot-scope="scope">
        <template v-if="columnData.type === 'href'">
            <a @click="(()=> handleRow(scope.$index, scope.row,columnData.prop, columnData.method))" style="color: #409EFF;">{{ scope.row[columnData.prop] }}</a>
        </template>
        <template v-else-if="columnData.type === 'linkBtn'">
            <el-button :disabled="filterLink(columnData.filterMethod, scope.row, columnData.prop)" :type="getLinkType(scope.row, columnData.prop, columnData.getType)" circle @click="(()=> handleRow(scope.$index, scope.row,columnData.prop, columnData.method))" ></el-button>
        </template>

        <template v-else-if="columnData.type === 'operations'">
            <template v-for="(operation, index) in columnData.operations">
            <operation-btn v-if="filter(operation.filterMethod, scope.row)" :btnType="operation.type" :label="_$Z[operation.label]" @btn-click="(()=> handleRow(scope.$index, scope.row,columnData.prop, operation.method))" :key="'op' + index"></operation-btn>
            </template>
        </template>
        <template v-else-if="columnData.type === 'tags'">
            <el-tag :type="setTagType(scope.row, columnData.method)" size="small">{{ scope.row[columnData.prop] }}</el-tag>
        </template>
        <template v-else-if="columnData.type==='switch'">
            <el-switch  v-model="scope.row[columnData.prop]"
                        active-color="#1d8bd8"
                        :active-value="columnData.activeValue"
                        :inactive-value="columnData.inactiveValue"
                        @change="(value)=>switchChange(value,scope.row,columnData.callback)">
            </el-switch>
        </template>
        <template v-else-if="columnData.type === 'editColumn'">
            <el-input v-model="scope.row[columnData.prop]"></el-input>
        </template>
        <template v-else>
          <template v-if="columnData.formatter === true">
            <span v-html="formatterData(scope.row,columnData.formatterMethod)"></span>
          </template>
          <template v-else>
            <span v-html="scope.row[columnData.prop]"></span>
          </template>
        </template>
      </template>
    </el-table-column>
</template>
<script>
import operationBtn from '@/views/platform/components/common/operationBtn'
export default {
  name: 'tableColumn',
  components: { operationBtn },
  data() {
    return {
      i18Keys: []
    }
  },
  created() {
    this.i18Keys.push(this.columnData.label)
    if (this.columnData.operations && this.columnData.operations.length > 0) {
      this.columnData.operations.forEach(e => {
        this.i18Keys.push(e.label)
      })
    }
  },
  props: {
    columnData: {
      type: Object,
      required: true
    }
  },
  methods: {
    switchChange(value, row, callback) { // 开关回调方法
      callback(value, row)
    },
    handleRow(index, row, prop, callback) { // 超链接跳转、编辑、删除行回调方法
      callback(index, row, prop)
    },
    getLinkType(row, prop, getType) {
      if (getType) {
        return getType(row, prop)
      } else {
        return ''
      }
    },
    setTagType(value, method) {
      if (method) {
        return method(value)
      } else {
        return ''
      }
    },
    filter(filterMethod, row) {
      if (filterMethod) {
        return filterMethod(row)
      } else {
        return true
      }
    },
    filterLink(filterMethod, row, prop) {
      if (filterMethod) {
        return filterMethod(row, prop)
      } else {
        return true
      }
    },
    formatterData(row, formatterMethod) {
      return formatterMethod(row)
    }
  }
}
</script>

